// 双击的次数 统计
let count = 0
// 双击生成心的数量
let heart_num = 50
let main_img = document.querySelector('.main_img')
let count_text = document.querySelector('.count')

main_img.addEventListener('dblclick', function (e) {
  let style = {
    left: (e.x - this.offsetLeft) + 'px',
    // top:e.y - this.offsetTop+'px',
    width: '300px'
  }
  count_text.innerText = `You liked it ${++count} times`
  main_img.appendChild(createRect(style, e))

})

// 创建心形
function createdHeart(class_names, styles,targetX,targetY,i) {
  let heart = document.createElement('div')

  if (Array.isArray(class_names)) {
    heart.classList.add(...class_names)
  } else {
    heart.classList.add(class_names)
  }

  if (Object.keys(styles).length) {
    Object.keys(styles).forEach((key, index) => {
      heart.style[key] = styles[key]
    })
  }
  function updatePostionX() {
    let step = targetX / 10
    let currentX = parseInt(heart.style.left)
    if (currentX > targetX) {
      heart.style.left = (currentX - step) + 'px'
      setTimeout(updatePostionX, 1)
    } else {
      heart.style.left = targetX + 'px'
    }
  }

  setTimeout(() => {
    updatePostionX()
  }, i * 10);

  function updatePositionY() {
    let step = 10
    let currentY = parseInt(heart.style.top)
    console.log( currentY);
    if (currentY > targetY) {
      heart.style.top = (currentY - step) + 'px'
      setTimeout(updatePositionY, 1)
    } else {
      heart.style.top = targetY + 'px'
      setTimeout(() => {
        heart.parentNode.remove()
      }, 2000);
    }
  }

  setTimeout(() => {
    updatePositionY()
  }, i * 10);

  return heart
}


// 创建矩形
function createRect(styles, e) {
  let rect = document.createElement('div')
  rect.classList.add('rect')
  if (Object.keys(styles).length) {
    Object.keys(styles).forEach(key => {
      rect.style[key] = styles[key]
    })
  }

  for (let i = 0; i < heart_num; i++) {
    let targetX = Math.floor(Math.random() * parseInt(rect.style.width))
    let targetY = 0
    let heart_style = {
      left: parseInt(rect.style.width) / 2 + 'px',
      top: (e.y - main_img.offsetTop) + 'px'
    }
    let heart = createdHeart(['custom-icon', 'custom-icon-aixin', 'small_heart'], heart_style,targetX,targetY,i)
    rect.appendChild(heart)
  }
  return rect
}


// 方案一  双击放大

// main_img.addEventListener('dblclick',function(e){
//   let style = {
//     left:(e.x - this.offsetLeft)+'px',
//     top:e.y - this.offsetTop+'px',
//   }

//   let heart = createdHeart(['custom-icon','custom-icon-aixin','heart'], style)
//   main_img.appendChild(heart)
//   count_text.innerText = `You liked it ${++count} times`
//   setTimeout(() => {
//     heart.remove()
//   }, 990);
// })



// 创建心型
// function createdHeart(class_names, styles) {
//   let heart = document.createElement('div')

//   if (Array.isArray(class_names)) {
//     heart.classList.add(...class_names)
//   } else {
//     heart.classList.add(class_names)
//   }

//   if (Object.keys(styles).length) {
//     Object.keys(styles).forEach((key, index) => {
//       heart.style[key] = styles[key]
//     })
//   }

//   return heart
// }